<template>
  <!-- 货物信息 -->
  <div>
    <el-form
      ref="goodsInfo"
      :model="form"
      :rules="rules"
      size="mini"
      label-position="right"
      label-width="138px"
      class="flex-form"
    >
      <el-form-item label="提(运)单号" prop="billNo">
        <el-input
          v-model.trim="form.billNo"
          placeholder="请输入提(运)单号"
          clearable
        />
      </el-form-item>
      <el-form-item label="海关货物通关代码" prop="customsStateCode">
        <el-select
          v-model="form.customsStateCode"
          placeholder="请选择海关货物通关代码"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_biz_mode"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="包装种类" prop="wrapType">
        <el-select
          v-model="form.wrapType"
          placeholder="请选择包装种类"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.custom_wrap_type"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货币类型" prop="currCode">
        <el-select
          v-model="form.currCode"
          placeholder="请选择货币类型"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in bt_currency"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运费支付方式" prop="feeCode">
        <el-select
          v-model="form.feeCode"
          placeholder="请选择运费支付方式"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_freight_pay_way"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="途径国家或地区" prop="routeCountry">
        <el-select
          v-model="form.routeCountry"
          placeholder="请选择途径国家或地区"
          filterable
          multiple
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_route_countrys"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输条款" prop="feeCondition">
        <el-select
          v-model="form.feeCondition"
          placeholder="请选择运输条款"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_condition_code"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收货人名称" prop="consigneeName">
        <el-input
          v-model="form.consigneeName"
          placeholder="收货人名称"
        >
        <el-button slot="append" class="input-btn" icon="el-icon-plus" @click="handleReceive">详细</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="发货人名称" prop="consignorName">
        <el-input
          v-model="form.consignorName"
          placeholder="发货人名称"
        >
        <el-button slot="append" class="input-btn" icon="el-icon-plus" @click="handleSender">详细</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="通知人名称" prop="notifyPersonName">
        <el-input
          v-model="form.notifyPersonName"
          placeholder="通知人名称"
        >
        <el-button slot="append" class="input-btn" icon="el-icon-plus" @click="handleNotifier">详细</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="危险品联系人名称" prop="dangerousPersonName" label-width="138px">
        <el-input
          v-model="form.dangerousPersonName"
          placeholder="危险品联系人名称"
        >
        <el-button slot="append" class="input-btn" icon="el-icon-plus" @click="handleDangerous">详细</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="集装箱信息" prop="mftContaList" label-width="138px">
        <el-button class="input-btn" icon="el-icon-plus" @click="handleMftConta">添加({{form.mftContaList.length}})</el-button>
      </el-form-item>
    </el-form>
    <!-- 提运单号 -->
    <div>
      <el-button
        v-if="editBillIndex != -1"
        type="success"
        plain
        @click="saveEditBill"
        size="mini"
        icon="el-icon-edit"
        style="margin: 15px 0"
        >保存修改</el-button
      >
      <el-button
        v-else
        type="success"
        plain
        @click="addBillItem"
        size="mini"
        icon="el-icon-plus"
        style="margin: 15px 0"
        >添加单号</el-button
      >
      <el-table min-height="600" ref="tableList" :data="goodsList" size="mini" @selection-change="handleSelectionChange">
        <el-empty
          slot="empty"
          :image="require('@/assets/images/empty.png')"
          :image-size="80"
        ></el-empty>
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column prop="billNo" label="提(运)单号" align="center"></el-table-column>
        <el-table-column
          prop="customsStateCode"
          label="海关货物通关代码"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-value :list="dict.type.mft_biz_mode" :dictCode="scope.row.customsStateCode"></dict-value>
          </template>
        </el-table-column>
        <el-table-column
          prop="wrapType"
          label="包装种类"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-value :list="dict.type.custom_wrap_type" :dictCode="scope.row.wrapType"></dict-value>
          </template>
        </el-table-column>
        <el-table-column
          prop="currCode"
          label="货币类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <dict-value :list="bt_currency" :dictCode="scope.row.currCode"></dict-value>
          </template>
        </el-table-column>
        <el-table-column
          prop="consigneeName"
          label="收货人名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="consignorName"
          label="发货人名称"
          align="center"
        ></el-table-column>
        <el-table-column prop="goodsItemList" label="商品项信息" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleAddGoods(scope.row, scope.$index)"
              size="mini"
              icon="el-icon-plus"
              >添加商品项信息({{scope.row.goodsItemList.length}})</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="packNo"
          label="货物总件数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="grossWt"
          label="货物总毛重(KG)"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="货物总价值"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column prop="goodsItemList" label="商品项信息" align="center" min-width="140">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleMftConta(scope.row, scope.$index)"
              size="mini"
              >集装箱信息({{scope.row.mftContaList.length}})</el-button
            >
          </template>
        </el-table-column> -->
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding fixed-width"
          width="80"
        >
          <template slot-scope="scope">
            <!-- <el-button
              v-if="scope.row.isEdit"
              size="mini"
              type="text"
              @click="saveBillItem(scope.row)"
              >保存</el-button
            > -->
            <!-- <el-button
              size="mini"
              type="text"
              @click="editBillItem(scope.row)"
              >编辑</el-button
            > -->
            <el-button
              size="mini"
              type="text"
              @click.native.prevent="deleteBillItem(scope.$index, goodsList)"
              >移除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 商品信息表 -->
    <goods-table ref="goodsTable" :dict="dictProp" @submitGoods="submitGoods" :wrapType="form.wrapType"></goods-table>


    <!-- 收货人信息 -->
    <receiver-info ref="receiverInfo" :communiType="dict.type.mft_communi_type" @submitReceiverInfo="submitReceiverInfo" :inputName="form.consigneeName" :consigneeList="form.consigneeList"></receiver-info>
    <!-- 发货人信息 -->
    <sender-info ref="senderInfo" :communiType="dict.type.mft_communi_type" @submitSenderInfo="submitSenderInfo" :inputName="form.consignorName" :consignorList="form.consignorList"></sender-info>
    <!-- 通知人信息 -->
    <notifier-info ref="notifierInfo" :communiType="dict.type.mft_communi_type" @submitNotifierInfo="submitNotifierInfo" :inputName="form.notifyPersonName" :notifyPersonList="form.notifyPersonList"></notifier-info>
    <!-- 危险品联系人信息 -->
    <dangerous-info ref="dangerousInfo" :communiType="dict.type.mft_communi_type" @submitDangerousInfo="submitDangerousInfo" :inputName="form.dangerousPersonName" :dangerousPersonList="form.dangerousPersonList"></dangerous-info>

    <!-- 集装箱信息 -->
    <container-info ref="containerInfo" @submitContainerInfo="submitContainerInfo" :mftContaList="form.mftContaList"></container-info>
  </div>
</template>

<script>
import DangerousInfo from './dangerousInfo.vue';
import goodsTable from "./goodsTable.vue";
import NotifierInfo from './notifierInfo.vue';
import ReceiverInfo from './receiverInfo.vue';
import SenderInfo from './senderInfo.vue';
import curr_type from "@/assets/dicts/curr_type.json"
import ContainerInfo from './containerInfo.vue';
export default {
  name: "goodsInfo",
  components: { goodsTable, ReceiverInfo, SenderInfo, NotifierInfo, DangerousInfo, ContainerInfo },
  dicts: ["mft_route_countrys", "mft_condition_code", "mft_freight_pay_way", "mft_communi_type", "custom_wrap_type", "mft_biz_mode","mft_consignee_type"],
  data() {
    return {
      // 提运单号列表
      goodsList: [],
      form: {
        billNo: null,
        customsStateCode: null,
        wrapType: null,
        packNo: null,
        grossWt: null,
        goodsPrice: null,
        routeCountry: null,
        currCode: "CNY",
        feeCode: null,
        feeCondition: null,
        consigneeName: null,
        consignorName: null,
        notifyPersonName: null,
        dangerousPersonName: null,
        consigneeList: [], //收货人信息
        consignorList: [], //发货人信息
        notifyPersonList: [], //通知人信息
        dangerousPersonList: [], //危险品联系人信息
        mftContaList: [], //集装箱信息
      },
      rules: {
        billNo: [
          {
            type: "string",
            required: true,
            message: "提(运)单号不能为空",
            trigger: "blur",
          },
        ],
        customsStateCode: [
          {
            type: "string",
            required: true,
            message: "海关货物通关代码不能为空",
            trigger: "blur",
          },
        ],
        currCode: [
          {
            type: "string",
            required: true,
            message: "货币类型不能为空",
            trigger: "blur",
          },
        ],
        feeCode: [
          {
            type: "string",
            required: true,
            message: "运费支付方式不能为空",
            trigger: "blur",
          },
        ],
        wrapType: [
          {
            type: "string",
            required: true,
            message: "包装种类不能为空",
            trigger: "blur",
          },
        ],
        consigneeName: [
          {
            type: "string",
            required: true,
            message: "收货人名称不能为空",
            trigger: "blur",
          },
        ],
        consignorName: [
          {
            type: "string",
            required: true,
            message: "发货人名称不能为空",
            trigger: "blur",
          },
        ],
      },
      editBillIndex: -1,
      currentAddIndex: -1,
      currentCheckedRow: {},
      bt_currency: curr_type.value, //货币类型字典
    };
  },
  computed: {
    dictProp() {
      //字典list，为避免子组件重复调接口获取，用computed计算传值
      return {
        type: this.dict.type,
      };
    },
  },
  methods: {
    // 控制只能同时选择一个提运单号
    handleSelectionChange(selection, val) {
      if(selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.tableList.toggleRowSelection(del_row, false);
      }
      if(selection.length > 0) {
        for(let key in this.form) {
          this.form[key] = selection[0][key];
        }
        this.currentCheckedRow = selection[0];
        this.goodsList.forEach((item, index) => {
          if(item.billNo === selection[0].billNo) {
            this.editBillIndex = index;
          }
        });
      } else {
        this.resetGoodsForm();
        this.currentCheckedRow = {};
        this.editBillIndex = -1;
      }
    },
    // 添加提(运)单号
    addBillItem() {
      this.$refs["goodsInfo"].validate((valid) => {
        if (valid) {
          let bills = this.goodsList.map(item => item.billNo);
          if(bills.indexOf(this.form.billNo) != -1) {
            this.$message.warning("该提(运)单号已存在!")
            return;
          }
          if(this.form.consigneeList.length === 0) {
            this.form.consigneeList.push(
              {
                consigneeName: this.form.consigneeName,
                communicationTypeText: null,
                type:'1',//收货人类型
                personPhone: null,
              }
            )
          }
          if(this.form.consignorList.length === 0) {
            this.form.consignorList.push(
              {
                consignorName: this.form.consignorName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          if(this.form.notifyPersonList.length === 0 && this.form.notifyPersonName) {
            this.form.notifyPersonList.push(
              {
                notifyPersonCode: null,
                notifyPersonName: this.form.notifyPersonName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          if(this.form.dangerousPersonList.length === 0 && this.form.dangerousPersonName) {
            this.form.dangerousPersonList.push(
              {
                dangerousPersonName: this.form.dangerousPersonName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          this.goodsList.push({
            ...this.form,
            goodsItemList: [], //商品项信息
          });
          this.resetGoodsForm();
        }
      })
    },
    resetGoodsForm() {
      this.$refs["goodsInfo"].resetFields();
      this.form.consigneeList = [];
      this.form.consignorList = [];
      this.form.notifyPersonList = [];
      this.form.dangerousPersonList = [];
      this.form.mftContaList = [];
    },
    saveEditBill() {
      this.$refs["goodsInfo"].validate((valid) => {
        if (valid) {
          if(this.form.consigneeList.length === 0) {
            this.form.consigneeList.push(
              {
                consigneeName: this.form.consigneeName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          if(this.form.consignorList.length === 0) {
            this.form.consignorList.push(
              {
                consignorName: this.form.consignorName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          if(this.form.notifyPersonList.length === 0 && this.form.notifyPersonName) {
            this.form.notifyPersonList.push(
              {
                notifyPersonCode: null,
                notifyPersonName: this.form.notifyPersonName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          if(this.form.dangerousPersonList.length === 0 && this.form.dangerousPersonName) {
            this.form.dangerousPersonList.push(
              {
                dangerousPersonName: this.form.dangerousPersonName,
                communicationTypeText: null,
                personPhone: null,
              }
            )
          }
          let obj = {
            ...this.form,
            goodsItemList: [], //商品项信息
          }
          this.goodsList.splice(this.editBillIndex, 1, obj);
          this.resetGoodsForm();
          this.editBillIndex = -1;
        }
      })
    },
    // 添加商品项信息
    handleAddGoods(row, index) {
      this.currentAddIndex = index;
      this.$refs.goodsTable.open(row);
    },
    submitGoods(list) {
      // 申报数量
      this.goodsList[this.currentAddIndex].packNo = list.reduce((pre, item) => {
        return pre + item.packNo;
      }, 0);
      // 毛重
      this.goodsList[this.currentAddIndex].grossWt = list.reduce((pre, item) => {
        return pre + item.grossWt;
      }, 0);
      // 总价
      this.goodsList[this.currentAddIndex].goodsPrice = list.reduce((pre, item) => {
        return pre + item.goodsPrice;
      }, 0);
      // 商品项信息
      this.goodsList[this.currentAddIndex].goodsItemList = list;
    },
    // 收货人详细信息
    handleReceive(row) {
      if(!this.form.consigneeName) {
        this.$message.warning("请先输入收货人姓名！");
        return;
      }
      this.$refs.receiverInfo.open();
    },
    // 收货人详细信息
    handleSender(row) {
      if(!this.form.consignorName) {
        this.$message.warning("请先输入发货人姓名！");
        return;
      }
      this.$refs.senderInfo.open();
    },
    // 通知人详细信息
    handleNotifier(row) {
      if(!this.form.notifyPersonName) {
        this.$message.warning("请先输入通知人姓名！");
        return;
      }
      this.$refs.notifierInfo.open();
    },
    // 危险品联系人详细信息
    handleDangerous(row) {
      if(!this.form.dangerousPersonName) {
        this.$message.warning("请先输入危险品联系人姓名！");
        return;
      }
      this.$refs.dangerousInfo.open();
    },
    // 添加集装箱
    handleMftConta() {
      this.$refs.containerInfo.open();
    },
    // 保存每一项收费科目
    saveBillItem(row) {
      this.$set(row, "isEdit", false);
    },
    // 编辑每一项收费科目
    editBillItem(row, index) {
      for(let key in this.form) {
        this.form[key] = row[key];
      }
      this.editBillIndex = index;
    },
    // 删除每一项收费科目
    deleteBillItem(index, rows) {
      rows.splice(index, 1);
    },
    submitReceiverInfo(val) {
      this.form.consigneeList = val;
    },
    submitSenderInfo(val) {
      this.form.consignorList = val;
    },
    submitNotifierInfo(val) {
      this.form.notifyPersonList = val;
    },
    submitDangerousInfo(val) {
      this.form.dangerousPersonList = val;
    },
    submitContainerInfo(val) {
      this.form.mftContaList = val;
    }
  },
};
</script>

<style lang="scss" scoped>
.flex-form {
  .el-form-item {
    width: 312px;
    margin-right: 0px;
  }
}
::v-deep .el-table__header {
  .el-checkbox {
    display: none;
  }
}
::v-deep .el-input-group__prepend {
  border: none !important;
  background: none !important;
}
::v-deep .input-btn {
  color: #13ce66 !important;
  background: #e7faf0 !important;
  border-color: #a1ebc2 !important;
}
</style>
